<template>
    <div class="productAttr">
        <div class="dataList">
            <!-- 左边文字 -->
            <div class="left_title">
                <i class="icon">
                    <el-icon size="16px">
                        <Memo />
                    </el-icon>
                </i>
                <span>数据列表</span>
            </div>
            <!-- 右边按钮 -->
            <div class="right_button">
                <el-button @click="addDataList">添加</el-button>
            </div>
        </div>
        <div class="productAttr_table">
            <el-table :data="tableList" :border="true" style="width: 100%">
                <el-table-column prop="id" label="编号" width="180" />
                <el-table-column prop="name" label="类型名称" width="180" />
                <el-table-column prop="attributeCount" label="属性数量" />
                <el-table-column prop="paramCount" label="参数数量" />
                <el-table-column label="设置" width="185">
                    <template #default="scope">
                        <el-button size="small" @click="propertyListFn">属性列表</el-button>
                        <el-button size="small">参数列表</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small">编辑</el-button>
                        <el-button size="small" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="demonstration">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10]" background
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

    </div>
</template>

<script setup lang="ts">
//引入图标
import { Memo } from "@element-plus/icons-vue";
import * as request from "@/request/modules/productCategory";
import useTable from "@/hooks/useTable";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const currentPage = ref(1)
const pageSize = ref(5)
const { tableList,
    pagination,
    handleSizeChange,
    handleCurrentChange,
    fetchData, } = useTable(request.categoryListAPI)
//添加
const addDataList = () => {
    console.log(tableList);

    ElMessageBox.prompt('类型名称', '添加类型', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:
            /^.+$/,
        inputErrorMessage: '请输入文字',
    })
        .then(async ({ value }) => {
            console.log(value);
            await request.addCategoryAPI({ name: value });
            ElMessage({
                type: 'success',
                message: `添加成功`,
            })
        })
}
//跳转属性列表
const propertyListFn = ()=>{
    
}
</script>

<style lang="less" scoped>
.productAttr {
    padding: 10px 20px;
}

.dataList {
    display: flex;
    padding: 20px;
    margin-top: 50px;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    height: 62px;
    box-sizing: border-box;
    color: var(--main-bg-color);

    .left_title {
        overflow: hidden;

        span {
            margin-left: 5px;
        }
    }
}
</style>